﻿<MHover>
    <MCard @attributes="context.Attrs" Class="mx-auto"
           MaxWidth="344">
        <MImage Src="https://cdn.masastack.com/stack/images/website/masa-blazor/cards/forest-art.jpg"></MImage>

        <MCardText>
            <h2 class="text-h6 primary--text">
                Magento Forests
            </h2>
            Travel to the best outdoor experience on planet Earth. A vacation you will never forget!
        </MCardText>

        <MCardTitle>
            <MRating Value="4"
                     Dense
                     Color="orange"
                     BackgroundColor="orange"
                     Hover
                     Class="mr-2">
            </MRating>
            <span class="primary--text text-subtitle-2">64 Reviews</span>
        </MCardTitle>

        <MOverlay Contained
                  Value="@context.Hover"
                  Class="text-center"
                  Color="#036358">
            <MButton>See more info</MButton>
        </MOverlay>
    </MCard>
</MHover>